---
title: Astro 사이트를 Deno에 배포
description: Deno를 사용하여 Astro 사이트를 웹에 배포하는 방법.
sidebar:
  label: Deno Deploy
type: deploy
logo: deno
supports: ['ssr', 'static']
i18nReady: true
---
import { Steps } from '@astrojs/starlight/components';
import StaticSsrTabs from '~/components/tabs/StaticSsrTabs.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Deno를 사용하여 자체 서버 또는 전 세계 엣지에서 JavaScript, TypeScript 및 WebAssembly를 실행하는 분산 시스템인 [Deno Deploy](https://deno.com/deploy)에 정적 또는 요청 시 렌더링되는 Astro 사이트를 배포할 수 있습니다.

이 가이드에는 Deno를 사용하여 자체 서버에서 Astro 사이트를 실행하고 GitHub Actions 또는 Deno Deploy CLI를 통해 Deno Deploy에 배포하는 방법에 대한 지침이 포함되어 있습니다.

## 요구 사항

이 가이드에서는 [Deno](https://deno.com/)가 이미 설치되어 있다고 가정합니다.

## 프로젝트 구성

Astro 프로젝트는 정적 사이트 또는 요청 시 렌더링되는 사이트로 배포될 수 있습니다.

### 정적 사이트

기본적으로 Astro 프로젝트는 정적 사이트입니다. Deno 또는 Deno Deploy를 사용하여 정적 Astro 사이트를 배포하는 데 추가 구성이 필요하지 않습니다.

### 요청 시 렌더링을 위한 어댑터

Deno를 사용하여 Astro 프로젝트에서 요청 시 렌더링을 활성화하고 Deno Deploy에 배포하려면 다음을 수행하세요.

<Steps>
1. 선호하는 패키지 관리자를 사용하여 프로젝트의 종속성에 [`@deno/astro-adapter` 어댑터][Deno adapter]를 설치합니다.

   <PackageManagerTabs>
     <Fragment slot="npm">
     ```shell
     npm install @deno/astro-adapter
     ```
     </Fragment>
     <Fragment slot="pnpm">
     ```shell
     pnpm install @deno/astro-adapter
     ```
     </Fragment>
     <Fragment slot="yarn">
     ```shell
     yarn add @deno/astro-adapter
     ```
     </Fragment>
   </PackageManagerTabs>

2. `astro.config.mjs` 프로젝트 구성 파일을 아래 변경 사항으로 업데이트하세요.

    ```js ins={3,6-7}
    // astro.config.mjs
    import { defineConfig } from 'astro/config';
    import deno from '@deno/astro-adapter';

    export default defineConfig({
      output: 'server',
      adapter: deno(),
    });
    ```

3. `package.json` 파일의 `preview` 스크립트를 아래 변경 사항으로 업데이트하세요.

    ```json del={8} ins={9}
    // package.json
    {
      // ...
      "scripts": {
        "dev": "astro dev",
        "start": "astro dev",
        "build": "astro build",
        "preview": "astro preview"
        "preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs"
      }
    }
    ```
    
    이제 이 명령을 사용하여 Deno를 통해 로컬에서 프로덕션 Astro 사이트를 미리 볼 수 있습니다.
    
    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm run preview
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm run preview
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn run preview
      ```
      </Fragment>
    </PackageManagerTabs>
</Steps>

## 배포하는 방법

자체 서버에서 Astro 사이트를 실행하거나 GitHub Actions 또는 Deno Deploy의 CLI (명령줄 인터페이스)를 사용하여 Deno Deploy에 배포할 수 있습니다.

### 자체 서버에 배포

<Steps>
1. 서버에 프로젝트를 복사합니다.

2. 선호하는 패키지 관리자를 사용하여 프로젝트 의존성을 설치합니다.
   
   <PackageManagerTabs>
     <Fragment slot="npm">
     ```shell
     npm install
     ```
     </Fragment>
     <Fragment slot="pnpm">
     ```shell
     pnpm install
     ```
     </Fragment>
     <Fragment slot="yarn">
     ```shell
     yarn
     ```
     </Fragment>
   </PackageManagerTabs>

3. 선호하는 패키지 관리자를 사용하여 Astro 사이트를 빌드합니다.

   <PackageManagerTabs>
     <Fragment slot="npm">
     ```shell
     npm run build
     ```
     </Fragment>
     <Fragment slot="pnpm">
     ```shell
     pnpm run build
     ```
     </Fragment>
     <Fragment slot="yarn">
     ```shell
     yarn run build
     ```
     </Fragment>
   </PackageManagerTabs>

4. 다음 명령으로 애플리케이션을 시작합니다. 

   <StaticSsrTabs>
     <Fragment slot="static">
       ```bash
       deno run -A jsr:@std/http/file-server dist
       ```
     </Fragment>
     
     <Fragment slot="ssr">
       ```bash
       deno run -A ./dist/server/entry.mjs
       ```
     </Fragment>
   </StaticSsrTabs>
</Steps>

### GitHub Actions 배포

프로젝트가 GitHub에 저장되어 있는 경우 [Deno Deploy 웹사이트](https://dash.deno.com/)에서 Astro 사이트를 배포하기 위한 GitHub Actions 설정 과정을 안내합니다.

<Steps>
1. 공개 또는 비공개 GitHub 저장소에 코드를 푸시합니다.

2. GitHub 계정으로 [Deno Deploy](https://dash.deno.com/)에 로그인한 후 [New Project](https://dash.deno.com)를 클릭합니다.

3. 저장소와 배포할 브랜치를 선택하고 **GitHub Action** 모드를 선택합니다. (Astro 사이트에는 빌드 단계가 필요하며 자동 모드를 사용할 수 없습니다.)

4. Astro 프로젝트에서 `.github/workflows/deploy.yml`에 새 파일을 생성하고 아래 YAML에 붙여넣습니다. 이는 Astro 사이트에 필요한 추가 단계가 포함된 Deno Deploy에서 제공하는 YAML과 유사합니다.

    <StaticSsrTabs>
      <Fragment slot="static">
        ```yaml
        ---
        // .github/workflows/deploy.yml
        ---
        name: Deploy
        on: [push]

        jobs:
          deploy:
            name: Deploy
            runs-on: ubuntu-latest
            permissions:
              id-token: write # Deno Deploy 인증에 필요
              contents: read # 저장소를 복제하는 데 필요

            steps:
              - name: Clone repository
                uses: actions/checkout@v4

              # npm을 사용하지 않나요? `npm ci`를 `yarn install` 또는 `pnpm i`로 변경하세요.
              - name: Install dependencies
                run: npm ci

              # npm을 사용하지 않나요? `npm run build`를 `yarn build` 또는 `pnpm run build`로 변경하세요.
              - name: Build Astro
                run: npm run build

              - name: Upload to Deno Deploy
                uses: denoland/deployctl@v1
                with:
                  project: my-deno-project # TODO: Deno Deploy 프로젝트 이름으로 변경
                  entrypoint: jsr:@std/http/file-server
                  root: dist
        ```
      </Fragment>
      
      <Fragment slot="ssr">
        ```yaml
        ---
        // .github/workflows/deploy.yml
        ---
        name: Deploy
        on: [push]

        jobs:
          deploy:
            name: Deploy
            runs-on: ubuntu-latest
            permissions:
              id-token: write # Deno Deploy 인증에 필요
              contents: read # 저장소를 복제하는 데 필요

            steps:
              - name: Clone repository
                uses: actions/checkout@v4

              # npm을 사용하지 않나요? `npm ci`를 `yarn install` 또는 `pnpm i`로 변경하세요.
              - name: Install dependencies
                run: npm ci

              # npm을 사용하지 않나요? `npm run build`를 `yarn build` 또는 `pnpm run build`로 변경하세요.
              - name: Build Astro
                run: npm run build

              - name: Upload to Deno Deploy
                uses: denoland/deployctl@v1
                with:
                  project: my-deno-project # TODO: Deno Deploy 프로젝트 이름으로 변경
                  entrypoint: dist/server/entry.mjs
        ```
      </Fragment>
    </StaticSsrTabs>

5. 이 YAML 파일을 커밋하고 구성된 배포 브랜치에서 GitHub로 푸시하면 배포가 자동으로 시작됩니다!

    GitHub 저장소 페이지 또는 [Deno Deploy](https://dash.deno.com)의 "Actions" 탭을 사용하여 진행 상황을 추적할 수 있습니다.
</Steps>

### CLI 배포

<Steps>
1. [Deno Deploy CLI](https://docs.deno.com/deploy/manual/deployctl)를 설치합니다.

    ```bash
    deno install -gArf jsr:@deno/deployctl
    ```

2. 선호하는 패키지 관리자를 사용하여 Astro 사이트를 빌드합니다.

   <PackageManagerTabs>
     <Fragment slot="npm">
     ```shell
     npm run build
     ```
     </Fragment>
     <Fragment slot="pnpm">
     ```shell
     pnpm run build
     ```
     </Fragment>
     <Fragment slot="yarn">
     ```shell
     yarn run build
     ```
     </Fragment>
   </PackageManagerTabs>

3. 배포하려면 `deployctl`을 실행합니다!

    <StaticSsrTabs>
      <Fragment slot="static">
        ```bash
        cd dist && deployctl deploy jsr:@std/http/file-server
        ```
      </Fragment>
      
      <Fragment slot="ssr">
        ```bash
        deployctl deploy ./dist/server/entry.mjs
        ```
      </Fragment>
    </StaticSsrTabs>
    
    [Deno Deploy](https://dash.deno.com)에서 모든 배포를 추적할 수 있습니다.

4. (선택 사항) 빌드를 단순화하고 하나의 명령으로 배포하려면 `package.json` 파일에 `deploy-deno` 스크립트를 추가하세요.

    <StaticSsrTabs>
      <Fragment slot="static">
        ```json ins={9}
        // package.json
        {
          // ...
          "scripts": {
          "dev": "astro dev",
          "start": "astro dev",
          "build": "astro build",
          "preview": "astro preview",
          "deno-deploy": "npm run build && cd dist && deployctl deploy jsr:@std/http/file-server"
          }
        }
        ```
      </Fragment>
      <Fragment slot="ssr">
    ```json ins={9}
    // package.json
    {
      // ...
      "scripts": {
        "dev": "astro dev",
        "start": "astro dev",
        "build": "astro build",
        "preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs",
        "deno-deploy": "npm run build && deployctl deploy ./dist/server/entry.mjs"
      }
    }
    ```
      </Fragment>
    </StaticSsrTabs>
    
    그런 다음 이 명령을 사용하여 Astro 사이트를 한 단계로 빌드하고 배포할 수 있습니다.
    
    ```bash
    npm run deno-deploy
    ```
</Steps>

[Deno adapter]: https://github.com/denoland/deno-astro-adapter
